<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statisticsData" :key="index">
        <el-card shadow="hover" :class="`stats-card stats-card-${index + 1}`">
          <div class="stats-icon">
            <el-icon><component :is="item.icon" /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-number">{{ item.value }}</div>
            <div class="stats-title">{{ item.title }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>数据趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-content">
            图表区域（集成 ECharts）
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="primary" plain v-for="(action, index) in quickActions" 
              :key="index" :icon="action.icon">
              {{ action.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

vue3.3

<script setup>
defineOptions({name:"Dashboard"});
import { ref, reactive } from 'vue'
import {
  View, User, ShoppingCart, Money,
  Plus, Upload, Download, Setting
} from '@element-plus/icons-vue'

const timeRange = ref('week')

const statisticsData = reactive([
  { title: '总访问量', value: '102,400', icon: View },
  { title: '总用户数', value: '1,024', icon: User },
  { title: '总订单数', value: '512', icon: ShoppingCart },
  { title: '总收入', value: '¥54,321', icon: Money }
])

const quickActions = [
  { name: '添加商品', icon: Plus },
  { name: '数据导入', icon: Upload },
  { name: '数据导出', icon: Download },
  { name: '系统设置', icon: Setting }
]
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);

  .stats-card {
    display: flex;
    align-items: center;
    padding: 20px;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-5px);
    }

    .stats-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      .el-icon {
        font-size: 24px;
        color: #fff;
      }
    }

    .stats-info {
      flex: 1;
      
      .stats-number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        line-height: 1.2;
      }
      
      .stats-title {
        font-size: 14px;
        color: #909399;
        margin-top: 5px;
      }
    }

    &.stats-card-1 .stats-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    &.stats-card-2 .stats-icon {
      background: linear-gradient(135deg, #2af598 0%, #009efd 100%);
    }
    &.stats-card-3 .stats-icon {
      background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    }
    &.stats-card-4 .stats-icon {
      background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
    }
  }

  .chart-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      span {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .chart-content {
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fafafa;
      color: #909399;
      border-radius: 4px;
    }

    .quick-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      padding: 10px;

      .el-button {
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;

        .el-icon {
          font-size: 24px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style> 